<template>
  <!--<div v-html="htmlStr" ref="vr">{{htmlStr}}</div>-->
  <div>
    <!--
		<img src="1.jpg" width= "50%"/>
		<img src="1.jpg" width= "50%" style="right:0px;"/>
		<div style="width:100%; height:768px;position:absolute;z-index:1;top:0px"></div>
    -->
    <div id="player_box" class="play_box">
      <ul
        id="vr_config_page"
        style="width:100%;position: absolute;z-index: 1000;margin: 0 0 0 0;display: none;"
      >
        <li>
          <div
            style="padding-left:10px;padding-bottom: 10px;color:#000000;margin-right:40px;float:right;text-align:left;background-color: #ffffff; width:65%"
            id="vr_config1"
            class="vr_config"
          >
            <h6>
              设置屏幕距离
              <span
                style="float: right;margin-right: 15px;cursor: pointer;"
                onclick="javascript:vr_config_page_display()"
              >关闭窗口</span>
            </h6>
            <button onclick="javascript:setOD('-');">-</button>
            <span id="od_1">0</span>
            <button onclick="javascript:setOD('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setOD_step('-');">-</button>
            <span id="od_s_1">1</span>
            <button onclick="javascript:setOD_step('+');">+</button>
            <h6>设置瞳距</h6>
            <button onclick="javascript:setPD('-');">-</button>
            <span id="pd_1">0</span>
            <button onclick="javascript:setPD('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setPD_step('-');">-</button>
            <span id="pd_s_1">1</span>
            <button onclick="javascript:setPD_step('+');">+</button>
            <h6>设置屏幕高度</h6>
            <button onclick="javascript:setS_H('-');">-</button>
            <span id="sh_1">0</span>
            <button onclick="javascript:setS_H('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setS_H_step('-');">-</button>
            <span id="sh_s_1">1</span>
            <button onclick="javascript:setS_H_step('+');">+</button>
          </div>
        </li>
        <li>
          <div
            style="padding-left:10px;padding-bottom: 10px;color:#000000;margin-left:40px;float:left;text-align: left;background-color: #ffffff;"
            id="vr_config2"
            class="vr_config"
          >
            <h6>
              设置屏幕距离
              <span
                style="float: right;margin-right: 15px;cursor: pointer;"
                onclick="javascript:vr_config_page_display()"
              >关闭窗口</span>
            </h6>
            <button onclick="javascript:setOD('-');">-</button>
            <span id="od_2">0</span>
            <button onclick="javascript:setOD('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setOD_step('-');">-</button>
            <span id="od_s_2">1</span>
            <button onclick="javascript:setOD_step('+');">+</button>
            <h6>设置瞳距</h6>
            <button onclick="javascript:setPD('-');">-</button>
            <span id="pd_2">0</span>
            <button onclick="javascript:setPD('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setPD_step('-');">-</button>
            <span id="pd_s_2">1</span>
            <button onclick="javascript:setPD_step('+');">+</button>
            <h6>设置屏幕高度</h6>
            <button onclick="javascript:setS_H('-');">-</button>
            <span id="sh_2">0</span>
            <button onclick="javascript:setS_H('+');">+</button>
            <span>，步长</span>
            <button onclick="javascript:setS_H_step('-');">-</button>
            <span id="sh_s_2">1</span>
            <button onclick="javascript:setS_H_step('+');">+</button>
          </div>
        </li>
      </ul>
      <ul
        id="vr_config_models"
        style="width:100%;position: absolute;z-index: 1000;margin: 0 0 0 0;display: none;"
      >
        <li>
          <div
            style="padding-left:10px;padding-bottom: 10px;color:#000000;margin-right:40px;float:right;text-align:left;background-color: #ffffff; width:65%"
            id="vr_config_models_1"
            class="vr_config"
          >
            <h6>
              观看模式
              <span
                style="float: right;margin-right: 15px;cursor: pointer;"
                onclick="javascript:vr_config_models_display()"
              >关闭窗口</span>
            </h6>
            <a style="color:#000000" href="javascript:loadVRConfig(80, 100, 115);">IMAX</a>&nbsp;
            <a style="color:#000000" href="javascript:loadVRConfig(65, 50, 180);">影院</a>&nbsp;
          </div>
        </li>
        <li>
          <div
            style="padding-left:10px;padding-bottom: 10px;color:#000000;margin-left:40px;float:left;text-align: left;background-color: #ffffff;"
            id="vr_config_models_2"
            class="vr_config"
          >
            <h6>
              观看模式
              <span
                style="float: right;margin-right: 15px;cursor: pointer;"
                onclick="javascript:vr_config_models_display()"
              >关闭窗口</span>
            </h6>
            <a style="color:#000000" href="javascript:loadVRConfig(80, 100, 115);">IMAX</a>&nbsp;
            <a style="color:#000000" href="javascript:loadVRConfig(65, 50, 180);">影院</a>&nbsp;
          </div>
        </li>
      </ul>
      <ul style="width:100%;">
        <li>
          <div
            style="margin-right:40px;float:right;"
            id="video"
            class="player"
            onmouseover="playerControl(true)"
            onmouseout="playerControl(false)"
          ></div>
        </li>
        <li>
          <div
            style="margin-left:40px;float: left;"
            id="video1"
            class="player"
            onmouseover="playerControl(true)"
            onmouseout="playerControl(false)"
          ></div>
        </li>
        <li style="text-align: center;">
          <div id="menu_1_1" style="margin-right:40px;float:right; width:65%;text-align:center;">
            <a
              href="javascript:selectCurrent_url();"
              id="select1"
              style="color:#000000"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
            >选择集数</a>&nbsp;
            <a
              id="btn_setVR1"
              style="color:#000000"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
              href="javascript:vr_config_page_display();"
            >设置VR</a>&nbsp;
            <a
              id="btn_vr_config_models_1"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
              href="javascript:vr_config_models_display();"
              style="color:#000000"
            >观看模式</a>
          </div>
        </li>
        <li style="text-align: center;">
          <div id="menu_1_2" style="margin-left:40px;width:65%;text-align:center;float:left;">
            <a
              href="javascript:selectCurrent_url();"
              id="select2"
              style="color:#000000"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
            >选择集数</a>&nbsp;
            <a
              id="btn_setVR2"
              style="color:#000000"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
              href="javascript:vr_config_page_display();"
            >设置VR</a>&nbsp;
            <a
              id="btn_vr_config_models_2"
              href="javascript:vr_config_models_display();"
              onmouseover="javascript:displaySelectNo()"
              onmouseout="javascript:displaySelectNo()"
              style="color:#000000"
            >观看模式</a>
          </div>
        </li>
      </ul>
      <ul style="width:100%">
        <li>
          <div
            id="menu1"
            style="margin-right:40px;float:right; width:65%;display:none; text-align:left;font-size: 16px;line-height: 28px;"
          >
            <a href="javascript:selectCloseSelectCurrent_url();">关闭</a>
            <br />
          </div>
        </li>
        <li>
          <div
            id="menu2"
            style="margin-left:40px;width:65%;display:none; text-align:left;float:left;font-size: 16px;line-height: 28px;"
          >
            <a href="javascript:selectCloseSelectCurrent_url();">关闭</a>
            <br />
          </div>
        </li>
      </ul>
    </div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
import api from "@/lib/apis/movies.js";
export default {
  data() {
    return {
      htmlStr: "<br />",
      uri: ""
    };
  },
  created() {
    /*let m_type = typeof window.play_urls;
    if (m_type == "undefined") {
      let ele = window.document.createElement("script");
      ele.src = "/html/vrJs.js";
      window.document.body.append(ele);
      this.injectJs = false;
    }*/
  },
  mounted() {
    //this.getHtmlStr();
    this.$nextTick(() => {
      window.play_urls= []
      window.play_urls.push(
        [
          this.$route.query
            .uri /*"https://phzyvip.com/20200530/Qd0Q6MwJ/index.m3u8"*/,
          "video/m3u8",
          "源1",
          0
        ]
      )

      console.log("d");

      window.keepmiddle = true;
      window.createPlayer();
      window.loadVRConfig();
    });
  },
  methods: {
    getHtmlStr() {
      api
        .getVrHtml()
        .then(response => {
          this.htmlStr = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getHtmlJs() {
      api
        .getVrJs()
        .then(response => {
          this.vrJs = response.data;
        })
        .catch(error => {
          console.log(error);
          this.vrJs = error;
        });
    }
  }
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0px;
  font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";
  font-size: 14px;
}
</style>
<style>
body {
  background: #000000;
}

.img {
  position: absolute;
  z-index: 0;
  top: 0px;
  height: 100%;
}

.play_box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  height: 400px;
}

.play_box ul {
  width: 100%;
  list-style-type: none;
  padding: 0 0;
}

.play_box ul li {
  list-style-type: none;
  width: 50%;
  float: left;
  word-break: break-all;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  line-height: 16px;
}

h6 {
  line-height: 16px;
  margin: 10px 0 10px 0;
}

.play_box ul li a {
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
}

.player,
.vr_config {
  width: 65%;
}
</style>